<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'

const dataText = ref('') // 日期
const tableData = ref([]) // 表格数据
const tabsType = ref(['在线听课人数', '课程购买量', '课程访问量']) // 标签类型
const tabsTypeIndex = ref(0) // 标签类型索引
const tabsData = ref(['按周','按月','按年']) // 时间标签
const tabsDataIndex = ref(0) // 时间标签索引
const echartsData = ref<number[]>([432, 2000, 93, 1200, 701])

// 监听属性选项属性 虚拟修改数据
watch([tabsTypeIndex, tabsDataIndex,dataText], () => {
  // 随机重置 echarts数据
  echartsData.value = []
  for (let i = 0; i < 5; i++) {
    echartsData.value.push(Math.floor(Math.random() * 2000))
  }
  // 渲染echarts
  const option = {
    series: [
      {
        data: echartsData.value,
      }
    ]
  }
  const myChart = echarts.init(chartBox.value)
  myChart.setOption(option)
})

// 图表
const chartBox = ref<HTMLDivElement>()
onMounted(() => {
  if (!chartBox.value) return
  const myChart = echarts.init(chartBox.value)
  const option = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['6-28', '6-29', '6-30', '7-1', '7-2']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: echartsData.value,
        type: 'line',
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#8befdc'
            },
            {
              offset: 1,
              color: '#fff'
            }
          ])
        }
      }
    ]
  }
  myChart.setOption(option)
})

</script>

<template>
  <el-container class="home">
    <el-header class="header">
      <div class="row">
        <div class="col">
          <img src="@/assets/fangwen.png" alt="" />
          <div class="text">0</div>
          <div class="title">今日访问量</div>
        </div>
        <div class="col">
          <img style="width: 60px; height: 65px" src="@/assets/yonghu.png" alt="" />
          <div class="text">0</div>
          <div class="title">新增用户量</div>
        </div>
        <div class="col">
          <img src="@/assets/car.png" alt="" />
          <div class="text">0</div>
          <div class="title">今日购买量</div>
        </div>
        <!-- 表格 -->
        <div class="colp">
          <el-table
            :data="tableData"
            height= "120"
          >
            <el-table-column
              prop=""
              width="116"
              label="">
            </el-table-column>
            <el-table-column
              prop="date"
              label="课程访问量"
              width="116">
            </el-table-column>
            <el-table-column
              prop="name"
              label="课程购买量"
              width="116">
            </el-table-column>
            <el-table-column
              prop="address"
              width="116"
              label="听课人数">
            </el-table-column>
            <el-table-column
              prop="address"
              label="机构数">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-header>
    <el-main class="main">
      <div class="header">
        <div class="left">
          <div class="tit" 
            @click="tabsTypeIndex = index" 
            :class="{active: tabsTypeIndex === index}" 
            v-for="(item,index) in tabsType" 
            :key="index"
          >{{ item }}</div>
        </div>
        <div class="right">
          <div
            class="tit"
            :class="{active: tabsDataIndex === index}"
            v-for="(item,index) in tabsData"
            @click="tabsDataIndex = index"
            :key="index"
          >{{item}}</div>
          <div class="block">
            <!-- <el-date-picker
              v-model="dataText"
              type="week"
              format="YYYY/MM/DD"
              placeholder="选择周">
            </el-date-picker> -->
            <el-date-picker v-model="dataText" type="month" placeholder="Pick a month">
              <template #default="cell">
                <div class="el-date-table-cell" :class="{ current: cell.isCurrent }">
                  <span class="el-date-table-cell__text">{{ cell.text + 1 }}期</span>
                </div>
              </template>
            </el-date-picker>
          </div>
        </div>
      </div>
      <!-- 图标 -->
      <div class="content" ref="chartBox">

      </div>
    </el-main>
  </el-container>
</template>

<style lang="less" scoped>
  .home {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    padding: 10px 70px;
    .header {
      width: 100% !important;
      height: 180px !important;
      padding: 8px 0;
      padding-top: 0;
      .row {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        .col {
          width: 180px;
          height: 100%;
          background-color: #fff;
          border-radius: 5px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          padding: 20px;
          img {
            width: 70px;
            height: 60px;
          }
          .text {
            font-size: 22px;
            color: #146df2;
            font-weight: 600;
          }
          .title {
            font-size: 14px;
            color: #847f86;
            font-weight: 600;
          }
        }
        .colp {
          width: 580px !important;
          height: 100%;
          background-color: #fff;
          border-radius: 5px;
          display: flex;
          align-items: center;
        }
        .col:nth-child(2) {
          padding-top: 15px;
        }
      }
    }
    .main {
      width: 100%;
      background-color: #fff;
      border-radius: 5px;
      padding: 25px;
      .header {
        display: flex;
        justify-content: space-between;
        height: 40px !important;
        .left {
          display: flex;
          align-items: center;
          .tit {
            margin-right: 35px;
            height: 40px;
            color: #818181;
            line-height: 40px;
            font-weight: 500;
            cursor: pointer;
            padding-bottom: 4px;
            overflow: hidden;
          }
          .active {
              color: #146df2;
              border-bottom: 5px solid #65ded7;
            }
        }
        .right {
          display: flex;
          height: 40px;
          align-items: center;
          .tit {
            width: 50px;
            height:30px;
            background-color: transparent;
            color: #818181;
            text-align: center;
            cursor: pointer;
            line-height: 30px;
            margin-right: 5px;
            font-size: 12px;
            border-radius: 3px;
          }
          .active {
            background-color: #079fff !important;
            color: #fff !important;
          }
          .block {
            .data {
            margin-left: 20px;
            cursor: pointer;
          }
          }
        }
      }
      .content {
        width: 100%;
        height: 400px;
      }
    }
  }
</style>
